<template>
  <div class="music-item">
    <ul class="songs-list">
      <li v-for="   (v,i) in songs  " :key="v.id" @click="selectItem(i)">
        <div class="songs-info">
          <span class="songs-name no-wrap">
            {{v.name}}
          </span>
          <i class="icon-add" @click.stop="addSong(v)"></i>
        </div>
        <p v-show="v.singer">
          <span v-for=" list in v.singer" :key="list.id">{{list.name}} </span>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: {
    songs: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {}
  },
  computed: {
    ...mapState(['playList', 'sequenceList'])
  },
  methods: {
    selectItem(i) {
      const commit = this.$store.commit
      commit('setPlayList', this.songs)
      commit('setSequenceList', this.songs)
      commit('setCurrentIndex', i)
      commit('setFullScreen', true)
      commit('setPlaying', true)
    },
    addSong(item) {
      this.$store.commit('setSongItem', item)
    },
    isPlayList(item) {
      const i = this.playList.findIndex(v => {
        return v.mid === item.mid
      })
      return i
    }
  }
}
</script>

<style scoped>
.songs-list {
  padding: 15px;
}
.songs-list li {
  padding-bottom: 10px;
  line-height: 30px;
}
.songs-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.icon-add {
  font-size: 14px;
}
</style>